<template>
  <div>
    <a-button v-if="!disabled" @click="showMap">定位</a-button>
    <a-button v-else @click="showMap">查看</a-button>
    <mapPoint
      :clickFlag="classification"
      :mapId="mapId"
      :disabled="disabled"
      ref="mapPoint"
      @choosePoint="choosePoint"
    ></mapPoint>
    <span v-if="this.value && this.value != ''" style="margin-left: 10px"> 已定位</span>
  </div>
</template>
<script>
  /**
   *
   * classification  point 点  area  绘制区域   fence 电子围栏
   */
  import mapPoint from './mapPoint'

  export default {
  name: 'mapArea',
  components: { mapPoint },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    mapId: {
      type: String,
      required: false,
    },
    value: {
      type: String,
      required: false,
    },
    classification: {
      type: String,
      default: 'point', //默认只打一个点
    },
  },
  methods: {
    showMap() {
      let _val = {}
      if (this.value) {
        _val = JSON.parse(this.value)
      }
      this.$refs.mapPoint.show(_val)
    },
    // 子modal回调
    choosePoint(value) {
      let valueStr = JSON.stringify(value)
      console.log(valueStr,'返回的数据');
      this.$emit('change', valueStr)
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
}
</script>

<style scoped>
</style>